<template>
    <el-dialog :title="title" @close="dialogClose" :visible="visible">
        <el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">
            <el-form-item label="头像">
                <el-upload class="uploadAvatar" ref="uploadAvatar" action="/api/students/uploadStuAvatar" list-type="picture-card"
                    :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1" name="headimgurl" :multiple="false">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="stuForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl">
                <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级" prop="class">
                <el-input v-model="stuForm.class" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="stuForm.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="stuForm.city" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
                <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="stuForm.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('cancel')">取 消</el-button>
            <el-button type="primary" @click="confirm('stuDialogRuleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    export default{
        props:{
            visible:{
                required:true,
                type:Boolean,
                default(){
                    return false;
                }
            }
        },
        data(){
            return{
                title:"增加学员信息",
                stuRules: {
                name: [
                    { required: true, message: '请输入名字', trigger: 'blur' }
                ],
                class: [
                    { required: true, message: '请输入班级', trigger: 'blur' }
                ],
                degree: [
                    { required: true, message: '请输入学历', trigger: 'blur' }
                ],
                city: [
                    { required: true, message: '请输入城市', trigger: 'blur' }
                ],
                productUrl: [
                    { required: true, message: '请输入项目地址', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ]
            },
            stuForm: {
                name: '',
                productUrl: '',
                headimgurl: '',
                class: '',
                age: '',
                city: '',
                degree: '',
                description: ''
            },
            }
        },
        methods:{
            removeAvatar(){

            },
            uploadSuccess(r){
                if(r.status){
                    this.stuForm.headimgurl = r.headimgurl
                }else{
                    this.$message.error(r.msg +"-"+ r.err)
                }
                
            },
            confirm(formName){
			this.$refs[formName] .validate(valid=>{
				if(valid){
					this.$emit('ok',this.stuForm)
				}
			})
		},
            dialogClose() {//dialog关闭时触发的回调
            //通过父组件传递下来的方法,关闭dialog
            this.$emit('cancel')

        },
        }
    }
</script>
<style>
    .uploadAvatar {
        text-align: left;
    }
    
    .el-upload-list__item.is-success,
    .el-upload--picture-card {
        width: 100px !important;
        height: 100px !important;
        line-height: 100px !important;
    }
    
    .el-dialog__header {
        padding: 0 !important;
        line-height: 60px;
    }
    </style>